<!-- 模块说明 -->
<template>
  <div class="flag" v-if="isFlag">请登陆后再浏览</div>
  <div class="box" v-else>
    <el-row>
      <el-button
        type="primary"
        style="margin-left: 16px"
        @click="drawer = true"
      >
        添加打卡信息
      </el-button>
    </el-row>
    <el-table :data="dklist" border style="width: 100%">
      <el-table-column align="center" label="序号">
        <template #default="scoped">
          <p>{{ scoped.$index + 1 }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户id">
        <template #default="scoped">
          <span>{{ scoped.row.userid }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="打卡时间">
        <template #default="scoped">
          <span>{{ scoped.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="行程">
        <template #default="scoped">
          <span>{{ scoped.row.journey }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="症状">
        <template #default="scoped">
          <span>{{ scoped.row.symptom }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="体温">
        <template #default="scoped">
          <span>{{ scoped.row.temperature }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="删除">
        <template #default="scoped">
          <el-button @click="del(scoped.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer v-model="drawer" title="" :with-header="false">
      <el-row>
        <el-input
          type="text"
          placeholder="请输入打卡时间"
          v-model="addlist.time"
          disabled
        ></el-input>
      </el-row>
      <el-row>
        <el-input
          type="text"
          placeholder="请输入行程"
          v-model="addlist.journey"
        ></el-input>
      </el-row>
      <el-row>
        <el-input
          type="text"
          placeholder="请输入症状"
          v-model="addlist.symptom"
        ></el-input>
      </el-row>
      <el-row>
        <el-input
          type="text"
          placeholder="请输入体温"
          v-model="addlist.temperature"
        ></el-input>
      </el-row>
      <el-row>
        <el-button type="primary" style="margin-left: 16px" @click="add">
          添加
        </el-button>
      </el-row>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { getdkList, getaddList, getdelList } from "../../api/health";
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "../../store/user";
const { userid } = useUserStore();
const drawer = ref(false);
const isFlag = ref<boolean>(false);
const getFlag = () => {
  if (userid) {
    isFlag.value = false;
  } else {
    isFlag.value = true;
  }
};
const getNowDate = () => {
  const timeOne = new Date();
  const year = timeOne.getFullYear();
  let month: any = timeOne.getMonth() + 1;
  let day: any = timeOne.getDate();
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  const NOW_MONTHS_AGO = `${year}-${month}-${day}`;
  return NOW_MONTHS_AGO;
};
const nowTime = getNowDate();
// 添加打卡信息
const addlist = ref({
  userid: userid,
  time: nowTime,
  journey: "",
  symptom: "",
  temperature: "",
});
const add = async () => {
  let res = await getaddList(addlist.value);
  console.log(res);
  usedkList();
  // add();
  drawer.value = false;
};
//获取打卡数据
const dklist = ref([]);
const usedkList = async () => {
  let res = await getdkList({ userid });
  dklist.value = res.data;
  // console.log(res, "dklist");
  // console.log(userid, "dklist");
};

// 删除打卡数据
const del = async (id: any) => {
  if (confirm("确定删除吗")) {
    let res = await getdelList(id);
    console.log(id);
    usedkList();
  }
};
// const addlist

onMounted(() => {
  usedkList();
  getFlag();
});
</script>
<style lang="scss" scoped>
.box {
  .el-row {
    padding: 5px 10px;
    margin-top: 20px;
  }
}
.flag {
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  width: 100%;
  margin: 300px auto;
}
</style>
